$(function () {
    let images = [
        "http://localhost:8083/resource_packs/images/carousel_img_one.jpg",
        "http://localhost:8083/resource_packs/images/carousel_img_two.jpg",
        "http://localhost:8083/resource_packs/images/carousel_img_three.jpg",
        "http://localhost:8083/resource_packs/images/carousel_img_four.jpg",
    ];

    let currentIndex = 0;
    let carouselImg = $(".carousel-img");

    //切换图片
    function changeBackgroundImage() {
        let jump = $(".jump")
        jump.css({
            "background": "rgba(0,0,0,.4)",
            "border": "2px solid hsla(0, 0%, 100%, .3)"
        })
        $(jump[currentIndex]).css({
            "background": " hsla(0,0%,100%,.4)",
            "border-color": " rgba(0,0,0,.4)"
        })
        carouselImg.css("background-image", "url('" + images[currentIndex] + "')");
    }


    //左切图片
    $(".control-left").on("click", function () {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = images.length - 1;
        }
        changeBackgroundImage();
    });

    //右切图片
    $(".control-right").on("click", function () {
        currentIndex++;
        if (currentIndex >= images.length) {
            currentIndex = 0;
        }
        changeBackgroundImage();
    });

    // 定时切换图片
    setInterval(function () {
        currentIndex++;
        if (currentIndex >= images.length) {
            currentIndex = 0;
        }
        changeBackgroundImage();
    }, 5000);

    let productTypeLi = $(".product-type-li");
    let moreCommodity = null;

    let commodity = new Commodity();
    productTypeLi.mouseenter(function () {
        $('.more-type-commodity').show();

        commodity.moreCommodity($(this).attr("data-ids")).then(function (res) {
            let moreCommodity = $(".more-type-commodity");
            moreCommodity.empty()
            let commodityJson = JSON.parse(res.toString());
            for (const commodity of commodityJson) {
                let commodityDiv = "<div class='more-commodity' commodity-id='" + commodity.commodityId + "'><img src='http://localhost:8083/resource_packs/images/" +
                    commodity.commodityImages + "' alt='更多商品'> <span>" + commodity.commodityName + "</span></div>"
                moreCommodity.append(commodityDiv)
            }
            $(".more-commodity").on("click", function () {
                let informationId = $(".body").attr("information-id");
                let name = $(".body").attr("name");
                let accountId = $(".body").attr("account-id");
                let commodityId = $(this).attr("commodity-id")
                //加密
                let aesKeyUtil = new Aes_key_util();
                const encryptedInformationId = aesKeyUtil.encrypt(informationId);
                console.log(1)
                //转格式 转格式是因为如果有特殊符号直接传给后端会变成空格
                window.open("/www.xiaomi.com/product/details?informationId=" +
                    encodeURIComponent(encryptedInformationId) + "&commodityId=" + commodityId + "&accountId=" + accountId +
                    "&name=" + name, "_blank");
            })
        }).catch(function (reason) {
            console.log(reason)
        })
    }).mouseleave(function () {
        moreCommodity = setTimeout(function () {
            $('.more-type-commodity').hide();

        }, 300);
    });

    $('.more-type-commodity').mouseenter(function () {
        clearTimeout(moreCommodity);
    }).mouseleave(function () {
        $('.more-type-commodity').hide();
    });

    $(".more").on({
        mouseenter: function () {
            // 鼠标进入时执行的操作
            $(".more-title").css("color", "#FF6700")
            $(".more-img").attr("src", "http://localhost:8083/resource_packs/images/more_right_color.png")
        },
        mouseleave: function () {
            // 鼠标移出时执行的操作
            $(".more-title").css("color", "#424242")
            $(".more-img").attr("src", "http://localhost:8083/resource_packs/images/more_right.png")
        }
    })
    let commodityType = $(".commodity-type");


    let tabCommodityType = $(".commodity-type-choose a");

    $(".commodity-type-choose a:first-child").css({
        "color": "#ff6700",
        "border-bottom": "2px solid #ff6700"
    })
    tabCommodityType.on({
        mouseenter: function () {
            $(".commodity-type-choose a").css({
                "color": "#424242",
                "border-bottom": "2px solid #f5f5f5"
            })
            $(this).css({
                "color": "#ff6700",
                "border-bottom": "2px solid #ff6700"
            })
            let parentTabIndex = $(this).parent().attr("index");

            $($(".multiple-products")[parentTabIndex]).empty()
            inquireByClassId($(this).attr("type-id"), parentTabIndex)
        }
    })
    let PhoneStatus = true;
    // 创建一个手机观察器实例
    observerInquireByClassId(commodityType[0], 10, 0, PhoneStatus)

    let earphoneStatus = true;
    // 创建一个耳机观察器实例
    observerInquireByClassId(commodityType[1], 91, 1, earphoneStatus)

    let notebookStatus = true;
    // 创建一个笔记本观察器实例
    observerInquireByClassId(commodityType[2], 48, 2, notebookStatus)

    let householdApplianceStatus = true;
    // 创建一个笔记本观察器实例
    observerInquireByClassId(commodityType[3], 14, 3, householdApplianceStatus)

    let electricalAppliancesStatus = true;
    // 创建一个电暖器观察器实例
    observerInquireByClassId(commodityType[4], 81, 4, electricalAppliancesStatus)

    let waterPurifiersStatus = true;
    // 创建一个电暖器观察器实例
    observerInquireByClassId(commodityType[5], 68, 5, waterPurifiersStatus)

    let audioStatus = true;
    // 创建一个电暖器观察器实例
    observerInquireByClassId(commodityType[6], 15, 6, audioStatus)

    let balanceBikesStatus = true;
    // 创建一个平衡车观察器实例
    observerInquireByClassId(commodityType[7], 30, 7, balanceBikesStatus)

    /**
     * 根据类别Id查询
     * @param classId 类别Id
     * @param index 元素下标
     */
    function inquireByClassId(classId, index) {
        //执行查询语句
        commodity.productCategory(classId).then(function (res) {
            let data = JSON.parse(res)
            for (const commodity of data) {
                if (parseFloat(commodity.subtotal) === parseFloat(commodity.commodityPrice)) {
                    let html = "<div class='products' commodity-id='"+commodity.commodityId+"'> <div class='products-img'> " +
                        "<img src='http://localhost:8083/resource_packs/images/" + commodity.commodityImages
                        + "' alt='商品图片'> </div> " +
                        "<div class='products-introduction'> <a class='products-title'>" + commodity.commodityName + "</a> " +
                        "<p class='desc'>" + commodity.commodityDescription + "</p> <p class='price'> " +
                        "<span class='num'>" + commodity.subtotal + "</span> <span>元起</span>" +
                        " </p> </div> </div>"
                    $($(".multiple-products")[index]).append(html)
                } else {
                    let html = "<div class='products' commodity-id='"+commodity.commodityId+"'> <div class='products-img'> " +
                        "<img src='http://localhost:8083/resource_packs/images/" + commodity.commodityImages
                        + "' alt='商品图片'> </div> " +
                        "<div class='products-introduction'> <a class='products-title'>" + commodity.commodityName + "</a> " +
                        "<p class='desc'>" + commodity.commodityDescription + "</p> <p class='price'> " +
                        "<span class='num'>" + commodity.subtotal + "</span> <span>元起</span>" +
                        " <s style='color: #b0b0b0'>" + commodity.commodityPrice + "元</s> </p> </div> </div>"
                    $($(".multiple-products")[index]).append(html)
                }
            }
            $(".products").on("click",function () {
                let informationId = $(".body").attr("information-id");
                let name = $(".body").attr("name");
                let accountId = $(".body").attr("account-id");
                let commodityId = $(this).attr("commodity-id")
                //加密
                let aesKeyUtil = new Aes_key_util();
                const encryptedInformationId = aesKeyUtil.encrypt(informationId);
                console.log(1)
                //转格式 转格式是因为如果有特殊符号直接传给后端会变成空格
                window.open("/www.xiaomi.com/product/details?informationId=" +
                    encodeURIComponent(encryptedInformationId) + "&commodityId=" + commodityId + "&accountId=" + accountId +
                    "&name=" + name, "_blank");
            })

        })
    }

    /**
     * 观察器
     * @param element 需要观察的元素
     * @param classId 类别Id
     * @param index 元素下标
     * @param status 状态
     */
    function observerInquireByClassId(element, classId, index, status) {
        // 创建一个观察器实例
        new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                //进入观察范围
                console.log(entry.isIntersecting)
                if (entry.isIntersecting && status === true) {
                    $($(".multiple-products")[index]).empty()
                    //执行查询语句
                    inquireByClassId(classId, index)
                    status = false
                }
            });
        }, {threshold: [0]}).observe(element);
    }
})
